<template>
  <div>
    <h1>我是Home</h1>
    <!-- router-link 的 to属性的字符串形式 -->
    <!-- <router-link to="/home/news">news</router-link>
    <router-link to="/home/music">music</router-link> -->
   
    <!-- router-link 的 to属性的对象形式1
    <router-link :to="{path:'/home/news'}">news</router-link>
    <router-link :to="{path:'/home/music'}">music</router-link> -->

      <!-- router-link 的 to属性的对象形式2 -->
    <!-- <router-link :to="{name:'news'}">news</router-link>
    <router-link :to="{name:'music'}">music</router-link> -->

    <!-- router-link 的 to属性的字符串形式 进行params传参  -->
     <!-- <router-link to="/home/news">news</router-link>
    <router-link to="/home/music/1">华语歌曲</router-link>
    <router-link to="/home/music/2">rap</router-link>
    <router-link to="/home/music/3">英文歌曲</router-link> -->

    <!-- router-link 的 to属性的对象形式 进行params传参  -->
     <router-link to="/home/news">news</router-link>
    <router-link :to='{
        name:"music",
        params:{
            id:"1",
            time:"6min"
           //可选的params参数要么不书写 要么写个undefined 不能写空字符串
        }
    }'>华语歌曲 </router-link>
    <router-link :to='{
        name:"music",
        params:{
            id:"2",
            time:"4min"
        }
    }'>rap </router-link>
    <router-link :to='{
        name:"music",
        params:{
            id:"3",
            time:undefined
        }
    }'>英文歌曲 </router-link>
    <router-link to='/home/game?name=王者荣耀&&time=2012'>游戏1</router-link>
    <router-link to='/home/game?name=和平精英&&time=2014'>游戏2</router-link>
    <!-- query传参 字符串形式 -->
    <!-- <router-link to='/home/news'>news</router-link>
    <router-link to='/home/music/?id=1'>华语歌曲</router-link>
    <router-link to='/home/music?id=2'>rap</router-link>
    <router-link to='/home/music?id=3'>英文歌曲</router-link> -->

    <!-- query传参 对象形式 -->
    <!-- <router-link :to='{
       name:"news"
    }'>news</router-link>
    <router-link :to='{
        name:"music",
        query:{
            id:"1"
        }
    }'>华语歌曲</router-link>
    <router-link :to='{
        name:"music",
        query:{
            id:"2"
        }
    }'>rap</router-link>
    <router-link :to='{
        name:"music",
        query:{
            id:"3"
        }
    }'>英文歌曲</router-link> -->

    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style>

</style>